Component({
  behaviors: [],
  properties: {
    a: Number,
    src: {
      type: String,
      value: '',
    },
  },
  observers: {
    src(val) {
      console.log('src变化 ===>', val)
      this.initSrc(val)
    },
  },
  data: {
    loaded: false,
    arReady: false,
    gltfSrc: '',
    gltfInfo: null,
    modelScale: '0.006 0.006 0.006', // 默认缩放比例，稍微大一点
  },
  lifetimes: {
    async attached() {
      console.log('data', this.data)
    },
  },
  methods: {
    initSrc(src) {
      // this.loadGLTF(src)
      this.setData({
        gltfSrc: src,
      })
    },
    handleGLTFLoaded({ detail }) {
      console.log('模型加载完成 ===>', detail)
      // 计算合适的缩放比例
      // this.calculateModelScale(detail.value)
    },
    handleReady({ detail }) {
      const xrScene = this.scene = detail.value
      this.mat = new (wx.getXrFrameSystem().Matrix4)()
      console.log('xr-scene', xrScene)
    },
    handleAssetsProgress({ detail }) {
      console.log('assets progress', detail.value)
    },
    handleAssetsLoaded({ detail }) {
      console.log('assets loaded', detail.value)
      // this.setData({loaded: true});
      this.scene.event.addOnce('touchstart', this.placeNode.bind(this))
    },

    // 计算模型合适的缩放比例
    calculateModelScale(gltfElement) {
      try {
        // 使用微信官方推荐的 calcTotalBoundBox 方法获取模型包围盒
        let boundingBox = null
        let maxSize = 1.0 // 默认大小

        if (gltfElement && gltfElement.getComponent) {
          // 获取 GLTF 组件
          const gltfComponent = gltfElement.getComponent('gltf')
          if (gltfComponent && typeof gltfComponent.calcTotalBoundBox === 'function') {
            // 使用官方 API 计算包围盒
            boundingBox = gltfComponent.calcTotalBoundBox()
            console.log('使用 calcTotalBoundBox 获取包围盒:', boundingBox)
          }
        }

        // 如果成功获取到包围盒
        if (boundingBox) {
          // 计算包围盒的最大尺寸
          const sizeX = Math.abs(boundingBox.max.x - boundingBox.min.x)
          const sizeY = Math.abs(boundingBox.max.y - boundingBox.min.y)
          const sizeZ = Math.abs(boundingBox.max.z - boundingBox.min.z)
          maxSize = Math.max(sizeX, sizeY, sizeZ)
        }

        // 设定目标大小（可以根据需要调整）
        // 根据模型原始大小智能调整目标尺寸
        let targetSize
        console.log('获取到的 boundingBox 信息 ===>', boundingBox)
        if (maxSize > 100) {
          // 超大型模型（如建筑物）
          targetSize = 0.1
        }
        else if (maxSize > 10) {
          // 大型模型（如汽车、家具）
          targetSize = 0.15
        }
        else if (maxSize > 1) {
          // 中型模型（如人物、小物件）
          targetSize = 0.25
        }
        else {
          // 小型模型
          targetSize = 0.3
        }

        // 计算缩放比例
        let scale = targetSize / maxSize

        // 限制缩放比例的范围，避免过大或过小
        scale = Math.max(0.001, Math.min(scale, 1.0))

        const scaleStr = `${scale} ${scale} ${scale}`

        console.log('模型包围盒信息:', {
          boundingBox,
          maxSize,
          targetSize,
          calculatedScale: scale,
          scaleString: scaleStr,
        })

        // 更新缩放比例
        this.setData({
          modelScale: scaleStr,
        })

        // 如果模型已经显示，立即应用新的缩放
        const gltfNode = this.scene.getNodeById('gltf')
        if (gltfNode) {
          gltfNode.scale.setValue(scale, scale, scale)
        }
      }
      catch (error) {
        console.error('计算模型缩放比例时出错:', error)
        // 使用默认缩放比例
        this.setData({
          modelScale: '0.01 0.01 0.01', // 稍微大一点的默认值
        })
      }
    },
    handleARReady({ detail }) {
      console.log('arReady', this.scene.ar.arVersion)
      if (this.data.gltfSrc) {
        this.loadGLTF(this.data.gltfSrc)
      }
    },
    async loadGLTF(gltfSrc) {
      const scene = this.scene
      if (gltfSrc) {
        try {
          wx.showLoading({
            title: '加载中...',
            mask: true,
          })
          await scene.assets.loadAsset({
            type: 'gltf',
            assetId: `gltf-load`,
            src: gltfSrc,
          })
          wx.hideLoading()
        }
        catch (e) {
          wx.hideLoading()
          wx.showToast({
            icon: 'error',
            title: '模型加载异常',
          })
          console.log('动态加载模型异常 ===>', e)
        }

        this.setData({
          gltfInfo: 'gltf-load',
        })
      }
    },
    placeNode(event) {
      const { clientX, clientY } = event.touches[0]
      const { frameWidth: width, frameHeight: height } = this.scene

      if (clientY / height > 0.8 && clientX / width < 0.2) {
        this.scene.getNodeById('setitem').visible = false
        this.scene.ar.resetPlane()
      }
      else {
        this.scene.ar.placeHere('setitem', true)
      }

      this.scene.event.addOnce('touchstart', this.placeNode.bind(this))
    },
  },
})
